<template>
	<view class="group-avatar" :style="containerStyle">
		<!-- 头像项：有URL显示图片，无URL显示缺省头像 -->
		<view class="avatar-item" v-for="(item, index) in displayAvatars" :key="index" :style="avatarItemStyle">
			<image v-if="item.url" :src="item.url" :alt="`Avatar ${index + 1}`" class="avatar-image" mode="aspectFill" />
			<AvatarFallback v-else :size="avatarSize/2" :name="item.nicName || item.userId" />
		</view>

		<!-- 多余数量提示（圆形样式，与头像统一） -->
		<view class="extra-count" v-if="avatars.length > maxCount" :style="extraCountStyle">+{{ avatars.length - maxCount }}</view>
	</view>
</template>

<script>
import AvatarFallback from './AvatarFallback.vue';

export default {
	name: 'GroupAvatar',
	components: { AvatarFallback },
	props: {
		avatars: {
			type: Array,
			required: true,
			// 修复：补全validator，确保传入对象数组（含有效标识）
			validator: (value) => {
				return value.every((item) => {
					// 允许：有URL（字符串）或有用户ID（字符串/数字）的对象
					return typeof item === 'object' && item !== null && (typeof item.url === 'string' || (item.userId !== undefined && item.userId !== null));
				});
			}
		},
		// 父容器尺寸（rpx），默认120rpx（与chatViewItem的头像容器一致）
		size: {
			type: Number,
			default: 120,
			validator: (value) => value > 0
		},
		maxCount: {
			type: Number,
			default: 9,
			validator: (value) => value > 0 && value <= 9
		},
		borderWidth: {
			type: Number,
			default: 3,
			validator: (value) => value >= 0
		},
		borderColor: {
			type: String,
			default: '#ffffff'
		},
		borderRadius:{
			type:String,
			default:"8rpx"
		}
	},
	computed: {
		// 修复：调整过滤逻辑，保留无URL但有用户标识的项（用于显示缺省头像）
		displayAvatars() {
			const seenUrls = new Set(); // 去重：基于URL（避免重复头像）

			return this.avatars
				.filter((item) => {
					// 过滤无效项：非对象、无URL且无userId的项
					if (typeof item !== 'object' || item === null) return false;
					// 有有效URL的项：去重后保留
					if (typeof item.url === 'string' && item.url.trim()) {
						if (seenUrls.has(item.url)) return false;
						seenUrls.add(item.url);
						return true;
					}
					// 无URL但有userId的项：保留（显示缺省头像）
					if (item.userId !== undefined && item.userId !== null) {
						return true;
					}
					return false;
				})
				.slice(0, this.maxCount); // 限制最大显示数量
		},

		// 实际显示的头像数量
		avatarCount() {
			return this.displayAvatars.length;
		},

		// 网格布局规则（与原逻辑一致，保持合理排列）
		gridLayout() {
			if (this.avatarCount === 1) return { cols: 1, rows: 1 };
			if (this.avatarCount === 2) return { cols: 2, rows: 1 };
			if (this.avatarCount <= 4) return { cols: 2, rows: 2 };
			return { cols: 3, rows: 3 }; // 5-9个用3x3网格
		},

		// 优化：精准计算单个头像尺寸（避免水平/垂直偏差）
		avatarSize() {
			const { cols, rows } = this.gridLayout;
			// 水平方向：总宽度 = 列数*头像尺寸 + (列数-1)*边框宽度（gap）
			const avatarSizeX = (this.size - this.borderWidth * (cols - 1)) / cols;
			// 垂直方向：总高度 = 行数*头像尺寸 + (行数-1)*边框宽度（gap）
			const avatarSizeY = (this.size - this.borderWidth * (rows - 1)) / rows;
			return Math.min(avatarSizeX, avatarSizeY);
		},

		// 容器样式（基于精准计算的尺寸）
		containerStyle() {
			const { cols, rows } = this.gridLayout;
			return {
				width: `${this.size}rpx`,
				height: `${this.size}rpx`,
				display: 'grid',
				// 用计算出的头像尺寸设置网格行列大小
				gridTemplateColumns: `repeat(${cols}, ${this.avatarSize}rpx)`,
				gridTemplateRows: `repeat(${rows}, ${this.avatarSize}rpx)`,
				gap: `${this.borderWidth}rpx`, // 间隙=边框宽度，保持一致
				justifyContent: 'center',
				alignItems: 'center',
				position: 'relative',
				overflow: 'hidden',
				borderRadius:this.borderRadius
			};
		},

		// 单个头像容器样式（修复圆形、尺寸问题）
		avatarItemStyle() {
			return {
				width: `${this.avatarSize}rpx`,
				height: `${this.avatarSize}rpx`,
				borderWidth: `${this.borderWidth}rpx`,
				borderColor: this.borderColor,
				borderRadius: '50%', // 修复：确认为圆形
				overflow: 'hidden',
				backgroundColor: '#f5f5f5', // 占位背景色
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center'
			};
		},

		// 多余数量提示样式（修复圆形、尺寸协调）
		extraCountStyle() {
			// 提示框尺寸=头像尺寸的60%，视觉协调
			const badgeSize = this.avatarSize * 0.6;
			return {
				width: `${badgeSize}rpx`,
				height: `${badgeSize}rpx`,
				fontSize: `${badgeSize * 0.4}rpx`, // 字体大小=提示框尺寸的40%
				fontWeight: 'bold',
				color: '#ffffff',
				backgroundColor: 'rgba(0, 0, 0, 0.7)',
				borderRadius: '50%', // 修复：确认为圆形
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center',
				position: 'absolute',
				right: `${this.borderWidth}rpx`,
				bottom: `${this.borderWidth}rpx`,
				border: `${this.borderWidth}rpx solid ${this.borderColor}`,
				zIndex: 10
			};
		}
	},
	
};
</script>

<style scoped>
/* 容器样式：保持与父组件协调，背景色可选 */
.group-avatar {
	margin: auto; /* 父容器flex布局下居中 */
	background-color: #dfdfdf;
	border-radius: 8rpx; /* 容器本身可设轻微圆角，不影响内部圆形头像 */
}

/* 图片强制填满容器（避免mode失效） */
.avatar-image {
	width: 100%;
	height: 100%;
}
</style>
